<template>
	<view class="mine_mark">
		<view class="endBOX">
			<view class="end-title">
				<view v-for="(item,index) in items" :key="index" :class="{btna:count == index}" @click="change(index)">
					{{item}}
				</view>
			</view>
			<view v-if="on_way_list||hold_list||get_list">
				<view class="end-cont" v-show="btnnum==0" :class="{dis:btnnum == 0}">
					
					<view class="peopleMessage" v-for="(item,index) in on_way_list" :key="index">
						<!-- <view style="width: 40px;height: 40px;background-color: #008000;border-radius: 20px;margin: auto 18px "> -->
							<image :src="item.avatar" mode="" style="width: 40px;height: 40px;background-color: #008000;border-radius: 20px;margin: auto 18px "></image>
						<!-- </view> -->
						<view class="content_one">
							<span style="font-size: 15px;color: #333333;">{{item.username}}</span>
							<span style="font-size: 10px;border: 1px solid #F6822F;color: #F6822F;margin-left: 5px;">{{item.job_status|getStatus }}</span>
							<span style="font-size: 11px;color: #999999;position: absolute;right: 10px;">
								 <image style="width: 12px;height: 12px;" src="../../static/img/mine_invite/doller.png" mode=""></image> {{item.amount}}
							</span>
							<view style="margin-top: 8px;display: flex;">
								<span style="font-size: 13px;color: #666666;">{{item.created_at}}</span>
								<span style="font-size: 13px;color: #F59C26;position: absolute;right: 10px;">{{item.step | back_free_step}}</span>
							</view>
						</view>
					</view>				
				</view>
				<view class="end-cont" v-show="btnnum==1" :class="{dis:btnnum == 1}">
					<view class="peopleMessage" v-for="(item,index) in hold_list" :key="index">
						<!-- <view style="width: 40px;height: 40px;background-color: #008000;border-radius: 20px;margin: auto 18px "> -->
							<image :src="item.avatar" mode="" style="width: 40px;height: 40px;background-color: #008000;border-radius: 20px;margin: auto 18px "></image>
						<!-- </view> -->
						<view class="content_one">
							<view style="margin-bottom: 8px;">
								<span style="font-size: 15px;color: #333333;">{{item.username}}</span>
								<span style="font-size: 10px;border: 1px solid #F6822F;color: #F6822F;margin-left: 5px;">{{item.job_status|getStatus }}</span>
								<span style="font-size: 11px;color: #999999;position: absolute;right: 10px;top: 16px;">
									<image style="width: 12px;height: 12px;vertical-align: middle;" src="../../static/img/mine_invite/doller.png" mode=""></image> 
										{{item.amount}}
									
								</span>
							</view>
							<view style="display: flex;">
								<span style="font-size: 13px;color: #666666;">{{item.created_at}}</span>
								<span style="font-size: 13px;color: #F59C26;position: absolute;right: 10px;">{{item.step | back_free_step}}</span>
								<!-- <span style="font-size: 13px;color: #F59C26;position: absolute;right: 10px;">进度 <progress percent="50%" stroke-width="10" /></span> -->
								<!-- <view style="position: absolute;right: 10px;top: 40px;">
									<span style="font-size: 13px;">进度</span>
									
									
									 <view class="strip"> 
									 
											<view class="blue" :style="'width:'+info.progress+'%'"> 
											
												<image src="../../static/img/mine_invite/money.png" class="proImg" :style="'left:'+info.progress-1+'%'"> </image>
											</view>
									 </view>
								</view> -->
				
							</view>
						</view>
						
					</view>	
				</view>
				
				<view class="end-cont" v-show="btnnum==2" :class="{dis:btnnum == 2}">
					<view class="peopleMessage" v-for="(item,index) in get_list" :key="index">
						<!-- <view style="width: 40px;height: 40px;background-color: #008000;border-radius: 20px;margin: auto 18px "> -->
							<image :src="item.avatar" mode="" style="width: 40px;height: 40px;background-color: #008000;border-radius: 20px;margin: auto 18px "></image>
						<!-- </view> -->
						<view class="content_one">
							<span style="font-size: 15px;color: #333333;">{{item.username}}</span>
							<span style="font-size: 10px;border: 1px solid #F6822F;color: #F6822F;margin-left: 5px;">{{item.job_status|getStatus }}</span>
							<span style="font-size: 11px;color: #999999;position: absolute;right: 10px;">
								<image style="width: 12px;height: 12px;" src="../../static/img/mine_invite/doller.png" mode=""></image> {{item.amount}}
							</span>
							<view style="margin-top: 8px;display: flex;">
								<span style="font-size: 13px;color: #666666;">{{item.created_at}}</span>
								<span style="font-size: 13px;color: #F59C26;position: absolute;right: 10px;">
									<image v-if="item.step===2" style="width: 12px;height: 12px;vertical-align: middle;" src="../../static/img/mine_invite/success.png" mode=""></image> {{item.step | back_free_step}}
								</span>
							</view>
						</view>
					</view>	
				</view>	
			</view>
			<view v-else>
				<image src="../../static/img/poster/unstart.png" mode="" style="width: 200px;height: 200px;display: block;margin: 0 auto"></image>
				<view style="text-align: center;padding-top:16px;font-size: 16px;">活动暂未开放，敬请期待~</view>
			</view>
		</view>		
	</view>
</template>

<script>
	const Page = require('../../utils/mtj-wx-sdk.js').Page;
	import {get_back_balancelists} from "../../api/user.js"
	export default {
		data() {
			return {
				info:{
					progress:32,	
				},
				token:"",
				isToken:false,
				btnnum: 0,
				items: ["在路上", "待到账", "已获得"],
				count:"",
				zhiweiid:'',
				on_way_list:[],
				hold_list:[],
				get_list:[],
				jobLists:[],
				show:false
			}
		},
		methods: {
			change(e) {
				this.count = e
				this.btnnum = e
				console.log(this.btnnum)
			},
			getlists(){
				
				if(this.isToken){
					get_back_balancelists({step:0}).then(res=>{
						this.on_way_list = res.data
					}),
					get_back_balancelists({step:1}).then(res=>{
						console.log(res)
						this.hold_list = res.data
					}),
					get_back_balancelists({step:2}).then(res=>{
						console.log(res)
						this.get_list = res.data
					})
				}else {
					uni.showModal({
						title: "职小侠提醒",
						content: '用户已登出，请重新登录！',
						success: (res) => {
							if (res.confirm) {
								// let showT = true
								uni.navigateTo({
									url: "/pages/login/index"
								});
							}
						}
					})
					return;
				}
			},
		},
		mounted() {
			this.getlists()
		},
		onShow() {
			this.token = uni.getStorageSync('authorization')
			if (this.token) {
				this.isToken = true
			} else {
				this.isToken = false
			}
			console.log(this.isToken);
			
		},
		filters:{
			getStatus(val){
				if(val=="0") {
					return "未入职"
				}else if(val=="1"){
					return "未入职"
				}else if(val=="2"){
					return "未入职"
				}else if(val=="3"){
					return "已入职"
				}else if(val=="4"){
					return "未入职"
				} 		
			},
			back_free_step(val){
				if(val=="0") {
					return "待返费"
				}else if(val=="1"){
					return "返费中..."
				}else if(val=="2"){
					return "返费成功"
				}else if(val=="3"){
					return "返费失败"
				}	
			}
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
	.mine_mark {
			/* background-image: url(https://static.cholink.com/recruit-staff/recruit-wx/mine_mark.png); */
			background-size:100% 100%; ;
			padding: 20px ;
		}
		.endBOX  {
			margin: 0 auto;
			background: #FFFFFF;
			/* box-shadow: 0px 0px 18px 0px rgba(249, 210, 94, 0.6); */
			border-radius: 10px;
			overflow: auto;
		}
		
		.end-title {
			display: flex;
			justify-content: center;
			align-items: center;
			/* text-align: center; */
			height: 38px;
			line-height: 35px;
			font-size: 14px;
			color: #333333;
			background-color: #FFFF;
			border-radius: 10px;
		}
		.end-title view {
			height: 38px;
			flex: 1;
			font-size: 16px;		
			font-family: Source Han Sans CN;
			text-align: center;
			background-color: #FFFFFF;
			color:#07C160 ;
			border: 1px solid #07C160;
		}
		.end-title view:nth-child(1){
			border-radius: 10px 0px 0px 10px;
		}
		.end-title view:nth-child(2){
			border-left:none ;
			border-right:none;
		}
		.end-title view:nth-child(3){
			border-radius: 0px 10px 10px 0px;
		}
		.btna {
			color: #FFFFFF !important;
			background-color: #07C160 !important;	
		}
		.peopleMessage {
			display: flex;
			height: 74px;
			width: 100%;
			position: relative;
			border-bottom: 1px solid #EEEEEE;
			/* padding: 16px 9px; */
			
		}
		.content_one {
			margin:  auto 0;
			
		}
		.strip {
				/* 父元素相对定位 */
				position: relative;
				width: 60px;
				height: 6px;
				color: rgba(80, 80, 80, 1);
				background-color: #fcecd2;
				border-radius: 2px;
				font-size: 14px;
				margin-top: -10px;
				margin-left: 40px;
				text-align: center;
			}
			.blue {
				height: 6px;
				color: rgba(80, 80, 80, 1);
				background-color: #ff882a;
				border-radius: 4px;
				font-size: 14px;
				/* line-height: 150%; */
				text-align: center;
			}
			.proImg{
				width:16px;
				height:16px;
				/* 子元素绝对定位   */
				position: absolute;
				/* 定位方向：属性值 */
				top:-6px
		 	}
			..close:hover{cursor:pointer;}
		.close {
		border: 2px solid #FFFFFF;
		color:white;
		border-radius: 20px;
		line-height: 30px;
		text-align: center;
		height: 30px;
		width: 30px;
		font-size: 18px;
		padding: 1px;
		position:absolute;
		/* right: 50%; */
		/* translateX:50% ; */
		bottom:-45px;
		/* opacity:0.2; */
		}
		
		.close::before {
		content: "\2716";
		color: #FFFFFF;
		}
		.block {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 17px;
			color: #333333;
			font-weight: bold;
		}
		.block image {
			width: 200px;
			height: 200px;
		}
	.type_box {
			background-color: #FFFFFF;
			padding-left: 16px;
			display: flex;
			padding: 14px 16px
		}
	
		.type_box view {
			width: 30px;
			height: 25px;
			/* border-radius: 12px; */
			text-align: center;
			font-weight: 400;
			font-size: 15px;
			color: #999999;
			line-height: 25px;
		}
	
		.type_box view:nth-child(2) {
			margin-left: 17px;
		}
	
		.type_box .is_active {
			/* background-color: #1089FF; */
			color: #1089FF;
		}
	
		.list-box {
			width: 100%;
			padding: 16px;
			position: absolute;
			bottom: 0;
			/* margin-top: 124px; */
			/* border-bottom: 1px solid #EEEEEE; */
		}
		.list-box .list {
			margin-bottom: 20px;
			border-bottom: 1px solid #EEEEEE;
		}
		
		.list-box view {
			margin-bottom: 5px;
		}
		
		.flex-wrap view {
			margin-right: 5px;
			font-size: 12px;
		}
		
		.tagstyle {
			height: 18px;
			border-radius: 4px;
			/* border:1px solid rgba(232,232,232,1); */
		}
		
		.cu-tag {
			background-color: #F5F5F5;
		}
		
		.cu-tag::after {
			border: none !important;
		}
		
		.title-box {
			display: flex;
		}
		
		.tit-l {
			color: #444444;
			font-size: 17px;
			font-weight: blod;
		}
		
		.tit-r {
			margin-left: auto;
			font-size: 15px;
			color: #999999;
		}
		
		.money {
			color: #07C160;
			font-size: 15px;
			font-weight: blod;
		}
		
		.address-box {
			display: flex;
			align-items: center;
			font-size: 13px;
			color: #999999;
		}
		
		.line {
			width: 2px;
			height: 10px;
			background-color: #DDDDDD;
			margin-left: 10px;
		}
		
		.company {
			margin-left: 10px;
			font-size: 13px;
			color: #999999;
		}
</style>
